<template>
  <div class="nurse-setting">
    <el-container>
      <!-- 左侧客户列表 -->
      <el-aside width="40%">
        <div class="customer-list">
          <h2>客户列表</h2>
          <el-table :data="customers" @row-click="handleCustomerClick">
            <el-table-column type="index" label="序号" width="60"></el-table-column>
            <el-table-column prop="customer.customerName" label="姓名"></el-table-column>
            <el-table-column prop="customer.customerSex" label="性别">
              <template #default="scope">
                {{ scope.row.customer.customerSex === 0? '男' : '女' }}
              </template>
            </el-table-column>
            <el-table-column prop="customer.customerAge" label="年龄"></el-table-column>
          </el-table>
        </div>
      </el-aside>
      <!-- 右侧护理记录 -->
      <el-main>
        <div class="nursing-records">
          <h2>护理记录</h2>
          <el-table :data="nursingRecords">
            <el-table-column type="index" label="序号" width="60"></el-table-column>
            <el-table-column prop="nursingTime" label="护理时间">
              <template #default="scope">
                {{ formatDate(scope.row.nursingTime) }}
              </template>
            </el-table-column>
            <el-table-column prop="itemId" label="护理项目ID"></el-table-column>
            <el-table-column prop="nursingCount" label="护理数量"></el-table-column>
            <el-table-column prop="nursingContent" label="护理内容"></el-table-column>
            <el-table-column prop="userId" label="护理人员ID"></el-table-column>
          </el-table>
        </div>
      </el-main>
    </el-container>
  </div>
</template>
<script setup>
import { ref, onMounted } from 'vue';
import http from '@/axios/http';

const customers = ref([]);
const nursingRecords = ref([]);
const selectedCustomerId = ref(null);

async function loadCustomers() {
  try {
    const response = await http.post('/lyy/get_customers_with_nursing_records', {
      customerName: '',
      pageNum: 1,
      pageSize: 10
    });

    if (response.data.result === 'success') {
      customers.value = response.data.data.list.map(item => ({ // 注意添加.data
        customer: item.customer,
        nursingRecords: item.nursingRecords
      }));

      if (customers.value.length > 0) {
        nursingRecords.value = customers.value[0].nursingRecords;
        selectedCustomerId.value = customers.value[0].customer.id; // 修正ID获取方式
      }
    }
  } catch (error) {
    console.error('加载客户列表失败:', error);
  }
}
// 处理客户点击事件
function handleCustomerClick(row) {
  selectedCustomerId.value = row.customerId;
  nursingRecords.value = row.nursingRecords;
}

// 日期格式化
function formatDate(date) {
  if (!date) return '';
  const dt = new Date(date);
  return `${dt.getFullYear()}-${(dt.getMonth() + 1).toString().padStart(2, '0')}-${dt.getDate().toString().padStart(2, '0')} ${dt.getHours().toString().padStart(2, '0')}:${dt.getMinutes().toString().padStart(2, '0')}`;
}

// 页面加载时初始化
onMounted(() => {
  loadCustomers();
});
</script>
<style scoped>
.nurse-setting {
  padding: 20px;
}
.customer-list,
.nursing-records {
  padding: 10px;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
}
h2 {
  margin-top: 0;
  margin-bottom: 20px;
  font-size: 18px;
  border-bottom: 1px solid #e4e7ed;
  padding-bottom: 10px;
  color: #333;
}
</style>